import React, {useEffect} from 'react'
// prettier-ignore
import {
  View,
  Platform,
  StatusBar,
  StyleSheet,
  SafeAreaView,
} from 'react-native'

import {RxScrollView} from '../../../../../packages/react-native-rxform'
import RxLinearGradient, {RxO_vertical} from '../../../../components/view/RxLinearGradient'
import StatusBarUtil from '../../../../commons/utils/StatusBarUtil'

const HomePage = props => {
  const {children, ...other} = props

  useEffect(() => {
    if (Platform.OS === 'android') {
      // StatusBar.setBackgroundColor('#36aeff', false)
      StatusBar.setTranslucent(true)
    }
  })

  const colors = ['#36aeff', '#bbe0fc']

  return (
    <SafeAreaView style={styles.container} {...other}>
      <View style={styles.bg}>
        <RxLinearGradient style={styles.con} colors={colors} orientation={RxO_vertical} />
      </View>
      <RxScrollView style={{flex: 1, padding: 10}}>{children}</RxScrollView>
    </SafeAreaView>
  )
}

export default HomePage

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBarUtil.getHeight(),
  },
  bg: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
  con: {flex: 1},
})
